<template>
	<div>
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh">
						<div class="rightCon">
							<headerPcTow :title="$t('l_anquanzhongxin')"></headerPcTow>

							<div class="listBox">
								<div class="listBoxIt">
									<div class="listBoxItL">
										<div class="back_icon_box">
											<i class="back_icons1">
												<svg viewBox="0 0 21 20" width="1em" height="1em" fill="currentColor"
													aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_zh--sprite"></use>
												</svg>
											</i>
										</div>
										<span>{{$t('l_huiyuanzhanghao')}}</span>
									</div>
									<div class="listBoxItR">
										{{userInfo?userInfo.username:''}}
									</div>
								</div>
								<div class="listBoxIt" @click="gomobilephone">
									<div class="listBoxItL">
										<div class="back_icon_box">
											<i class="back_icons2">
												<svg viewBox="0 0 21 20" width="1em" height="1em" fill="currentColor"
													aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_sj--sprite"></use>
												</svg>
											</i>
										</div>
										<span>{{$t('l_shouji')}}</span>
									</div>
									<div class="listBoxItR">
										<span>{{userInfo?userInfo.mobile:$t('l_weibangding')}}</span>
										<div class="back_icon_box">
											<i class="back_icons">
												<svg viewBox="0 0 21.999 35.998" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite"></use>
												</svg>
											</i>
										</div>
									</div>
								</div>
							</div>

							<div class="listBox" @click="gopassword">
								<div class="listBoxIt">
									<div class="listBoxItL">
										<div class="back_icon_box">
											<i class="back_icons5">
												<svg viewBox="0 0 21 20" width="1em" height="1em" fill="currentColor"
													aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_yz--sprite"></use>
												</svg>
											</i>
										</div>
										<span>{{$t('l_denglumima')}}</span>
									</div>
									<div class="listBoxItR">
										<div class="back_icon_box">
											<i class="back_icons">
												<svg viewBox="0 0 21.999 35.998" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite"></use>
												</svg>
											</i>
										</div>
									</div>
								</div>
								<div class="listBoxIt" @click="goSecurity">
									<div class="listBoxItL">
										<div class="back_icon_box">
											<i class="back_icons6">
												<svg viewBox="0 0 21 20" width="1em" height="1em" fill="currentColor"
													aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_card--sprite"></use>
												</svg>
											</i>
										</div>
										<span>{{$t('l_tixianmima')}}</span>
									</div>
									<div class="listBoxItR">
										<span>{{userInfo && userInfo.pay_password?$t('l_yishezhi'):$t('l_dianjishezhi')}}</span>
										<div class="back_icon_box">
											<i class="back_icons">
												<svg viewBox="0 0 21.999 35.998" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite"></use>
												</svg>
											</i>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>


				</div>

			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<navHeader :title="$t('l_anquanzhongxin')"></navHeader>

				<div class="con">
					<div class="contop">
						<div class="item">
							<div class="left">
								<i class="anticon">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_dl_zh--sprite"></use>
										</svg>
									</i>
								</i>
								<span>{{$t('l_huiyuanzhanghao')}}</span>
							</div>
							<div class="right">
								<span>{{userInfo?userInfo.username:''}}</span>
							</div>
						</div>
						<div class="item" @click="gomobilephone">
							<div class="left">
								<i class="anticon" style="color: var(--theme-primary-color);">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_dl_sj--sprite"></use>
										</svg>
									</i>
								</i>
								<span>{{$t('l_shouji')}}</span>
							</div>
							<div class="right">
								<span>{{userInfo?userInfo.mobile:$t('l_weibangding')}}</span>
								<i class="anticon">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite"></use>
										</svg>
									</i>
								</i>
							</div>
						</div>
						<!-- <div class="item">
							<div class="left">
								<i class="anticon" style="color: var(--theme-primary-color);">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_dl_yj--sprite"></use>
										</svg>
									</i>
								</i>
								<span>邮箱</span>
							</div>
							<div class="right">
								<span>未绑定</span>
							</div>
						</div> -->
					</div>
					<div class="contop">
						<div class="item" @click="gopassword">
							<div class="left">
								<i class="anticon" style="color: #04be02;">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_dl_yz--sprite"></use>
										</svg>
									</i>
								</i>
								<span>{{$t('l_denglumima')}}</span>
							</div>
							<div class="right">
								<i class="anticon">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite"></use>
										</svg>
									</i>
								</i>
							</div>
						</div>
						<div class="item">
							<div class="left">
								<i class="anticon" style="color: #e94d3c;">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_dl_card--sprite"></use>
										</svg>
									</i>
								</i>
								<span>{{$t('l_tixianmima')}}</span>
							</div>
							<div class="right" @click="goSecurity">

								<span>{{userInfo && userInfo.pay_password?$t('l_yishezhi'):$t('l_dianjishezhi')}}</span>
								<i class="anticon">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite"></use>
										</svg>
									</i>
								</i>
							</div>
						</div>
						<!-- <div class="item" @click="gomibao">
							<div class="left">
								<i class="anticon" style="color: #04be02;">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_dl_mb--sprite"></use>
										</svg>
									</i>
								</i>
								<span>密保问题</span>
							</div>
							<div class="right">
								<span>未绑定</span>
								<i class="anticon">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh1--sprite"></use>
										</svg>
									</i>
								</i>
							</div>
						</div> -->
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				userInfo: null,
				navIndex: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
			}
		},
		created() {
			this.reloadUserInfo()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.$router.push('/')
			},
			gomobilephone() {
				this.$router.push('./mobilephone')
			},
			gopassword() {
				this.$router.push('./password')
			},
			gomibao() {
				this.$router.push('./mibao')
			},
			goSecurity() {
				this.$router.push('./security?set=1')
			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						localStorage.setItem('userInfo', JSON.stringify(res.data))
					} else {
						this.$message.error(res.msg);
					}
				})
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.con {
		width: 100%;
		padding: 0.2rem;
	}

	.contop {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.14rem;
		box-shadow: 0 0.03rem 0.1rem 0 rgb(0 0 0 / 6%);
		margin-bottom: 0.2rem;
		padding: 0 0.2rem;
	}

	.item {
		align-items: center;
		border-bottom: 0.01rem solid var(--theme-color-line);
		display: flex;
		height: 0.8rem;
		justify-content: space-between;
		padding-left: 0.04rem;
	}

	.item:last-child {
		border-bottom: 0;
	}

	.left {
		align-items: center;
		justify-content: flex-start;
		display: flex;
	}

	.left .anticon {
		height: 0.25rem;
		width: 0.25rem;
		color: var(--theme-color-line);
		font-size: 12px;
	}

	.left span {
		color: #ffffff;
		font-size: .2rem;
		margin-left: 0.16rem;
	}

	.right {
		align-items: center;
		justify-content: flex-end;
		display: flex;
	}

	.right span {
		color: var(--theme-color-line);
		font-size: .2rem;
	}

	.right .anticon {
		transform: rotate(180deg);
		width: 0.15rem !important;
		height: 0.24rem !important;
		color: var(--theme-text-color-lighten);
		font-size: 12px;
		margin-left: 0.2rem;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.listBox {
		width: 100%;
		margin: 20px 0 0;
		align-items: center;
		background-color: var(--theme-main-bg-color);
		border-radius: 5px;
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
	}

	.listBoxIt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		box-sizing: border-box;
		border-bottom: 1px solid var(--theme-color-line);
	}

	.listBoxIt:last-child {
		border-bottom: none;
	}

	.listBoxItL {
		display: flex;
		align-items: center;
		font-size: 15px;
		color: var(--theme-text-color-darken);
	}

	.listBoxItL span {
		margin-left: 10px;
	}

	.listBoxItR {
		display: flex;
		align-items: center;
		font-size: 15px;
		cursor: pointer;
		color: var(--theme-text-color-lighten);
	}

	.listBoxItR span {
		margin-right: 5px;
	}

	.listBoxItR svg {
		transform: rotate(180deg);
	}

	.back_icons1 {
		color: var(--theme-text-color-lighten);
	}

	.back_icons2 {
		color: var(--theme-primary-color);
	}

	.back_icons3 {
		color: var(--theme-primary-color);
	}

	.back_icons4 {
		color: var(--theme-text-color-lighten);
	}

	.back_icons5 {
		color: #04be02;
	}

	.back_icons6 {
		color: #e94d3c;
	}

	.back_icons7 {
		color: #04be02;
	}

	.back_icons8 {
		color: var(--theme-primary-color);
	}
</style>